<template>
  <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      width="568px"
      class="pwdCon"
      @close="handlePwdClose"
  >
    <el-form :model="form" label-width="85px" :rules="rules" ref="form">
      <el-form-item label="原始密码：" prop="oldPassword">
        <el-input v-model="form.oldPassword" type="password" placeholder="请输入原始密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="newPassword">
        <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="affirmPassword">
        <el-input v-model="form.affirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handlePwdClose">取 消</el-button>
      <el-button type="primary" @click="handleSave">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>


export default {
  name: 'Password',
  props: {
    dialogFormVisible: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        oldPassword: [{ validator: this.validatePwd, trigger: 'blur' }],
        newPassword: [{ validator: this.validatePwd, trigger: 'blur' }],
        affirmPassword: [{ validator: this.validatePass2, trigger: 'blur' }],
      },
    };
  },
  methods: {
    validatePwd(rule, value, callback) {
      const reg = /^[0-9A-Za-z]{6,20}$/;
      if (!value) {
        callback(new Error('请输入'));
      } else if (!reg.test(value)) {
        callback(new Error('6 - 20位密码，数字或字母，区分大小写'));
      } else {
        callback();
      }
    },
    validatePass2(rule, value, callback) {
      if (!value) {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.newPassword) {
        callback(new Error('密码不一致，请重新输入密码'));
      } else {
        callback();
      }
    },
    async handleSave() {
      const valid = await (this.$refs.form).validate();
      if (valid) {
        const parnt = {
          oldPassword: this.form.oldPassword,
          newPassword: this.form.newPassword,
        };
        // await editPassword(parnt);
        this.$emit('handleclose');
        (this.$refs.form).resetFields();
      } else {
        return false;
      }
    },
    handlePwdClose() {
      (this.$refs.form).resetFields();
      this.$emit('handleclose');
    },
  },
};
</script>
